<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="box">

  </div>
  <!-- 引入react核心库 -->
  <script src="./旧版本/react.development.js"></script>
  <!-- 引入react-dom 支持react操作dom -->
  <script src="./旧版本/react-dom.development.js"></script>
  <!-- babel用于将jsx语法 转为js-->
  <script src="./旧版本/babel.min.js"></script>

  <script type="text/babel">

    /*jsx实现创建虚拟dom 渲染到页面*/
    //1.创建虚拟dom

    const VDOM = (
      <h1>
        <span>hello，react</span>
      </h1>
    ) /*注意：此处一定不能写引号,因为不是字符串*/
    console.log(VDOM, 'vdom')
    //2. 渲染虚拟dom到页面，转成真实dom
    // ReactDOM.render(虚拟DOM, 要放入的容器)
    ReactDOM.render(VDOM, document.getElementById('box'))

    /*
      容易出现的问题
      1.引入包的顺序 react.js react-dom.js babel.js
      2.ReactDOM.render()  
    */

  </script>
</body>

</html>